<!--html-->
<template>
  <div class="common-layout">
    <el-container>
      <el-header class="el-table-v2__header-wrapper">
        <div class="header-content" >
           <h3>通用后台管理系统</h3>
           <span class="welcome" >欢迎您的登录</span>
        </div>
      </el-header>
      <el-main >
        <div class="login-wrapped">
          <el-card class="box-card">
            <el-tabs v-model="activeName" class="demo-tabs" :stretch="true">
              <el-tab-pane label="登录" name="first">
                <el-form class="login-form">
                  <el-form-item label="账号">
                    <el-input v-model="loginData.account" placeholder="请输入账号"/>
                  </el-form-item>
                  <el-form-item label="密码">
                    <el-input v-model="loginData.password" placeholder="请输入密码"/>
                  </el-form-item>
                  <!-- 底部外壳-->
                  <div class="el-table__footer-wrapped">
                    <div class="forget-password">
                      <apan class="forget-password-button" @click="openForgetPassword">忘记密码</apan>
                    </div>
                    <div class="footer-button">
                      <el-button type="primary" @click="Login">登录</el-button>
                    </div>
                    <div class="footer-go-register">
                      还没有账号？ <span class="go-register"> 马上注册 </span>
                    </div>
                  </div>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="注册" name="second">
                <el-form class="login-form">
                  <el-form-item label="账号">
                    <el-input v-model="registerData.account" placeholder="账号长度6-12位"/>
                  </el-form-item>
                  <el-form-item label="密码">
                    <el-input v-model="registerData.password" placeholder="密码长度6-12 位含字母数字"/>
                  </el-form-item>
                  <el-form-item label="确认密码">
                    <el-input v-model="registerData.repassword" placeholder="请再次输入密码"/>
                  </el-form-item>
                </el-form>
                <div class="footer-button">
                  <el-button type="primary" @click="Register">注册</el-button>
                </div>
              </el-tab-pane>
            </el-tabs>

          </el-card>
        </div>
      </el-main>
      <el-footer class="el-table__footer-wrapper">
        <div class="footer-content">
          <div class="title">
            <span>阿里云博客专家</span> |
            <span>阿里云博客专家</span> |
            <span>阿里云博客专家</span> |
            <span>阿里云博客专家</span>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>

  <forget_password ref="forgetP"> </forget_password>
</template>


<!--Javascript-->
<script lang="ts" setup>
import {reactive, ref} from 'vue'
import Forget_password from "@/views/login/components/forget_password.vue";
import {
  login,register
} from '@/api/login'
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const activeName = ref('first')
const router = useRouter()

interface formData {
  account : number,
  password: string
}

interface formData1 {
  account : number,
  password: string,
  repassword ?: string
}

const loginData : formData  = reactive({
  account: null,
  password: ''
})

const registerData : formData1  = reactive({
  account: null,
  password: '',
  repassword: ''
})

const forgetP = ref()

const openForgetPassword = ()=>{
   forgetP.value.open()
}

//注册
const Register = async ()=>{
  if(registerData.password === registerData.repassword) {
    const res =  await register( registerData)
    if(res.data.message == "注册账号成功") {
      ElMessage({
        message: '注册成功' ,
        type: 'success',
      })
      activeName.value = 'first'
    }else{
      ElMessage.error('注册失败 请检查数据是否正确')
    }
  }else {
    ElMessage.error('注册失败，请检查密码是否一致')
  }
}

//登录
const Login = async()=> {
  const res =await login(loginData)
  const {token} = res.data
  if(res.data.message == "登陆成功") {
    ElMessage({
      message: '登录成功' ,
      type: 'success',
    })
  }
  localStorage.setItem('token',token)
  //跳转
  router.push('/home')
}

</script>

<style scoped lang="scss">
      //头部外壳
      .el-table-v2__header-wrapper {
        .header-content {
          width: 1200px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        //欢迎语
        .welcome{
          font-size: 13px;
        }
      }
      //主体部分
      .el-main{
        background-image: url("@/assets/background.jpg");
        height: 600px;
        --el-main-padding:0;
        //登陆外壳
        .login-wrapped {
          width: 1200px;
          height: 600px;
          margin: 0 auto;
          //卡片样式
          .box-card {
            width: 350px;
            height: 375px;
            float: right;
            position: relative;
            top: 14%;
          }

        }
      }
      //底部外壳
      .el-table__footer-wrapper {
        margin-top: 10px;
         //底部内容
        .footer-content {
          width: 1200px;
          margin: 0 auto;
          display: flex;
          justify-content: center;
          align-items: center;
          //标签样式
          .title {
            color: #666;
          }

          span {
            color: #666;
            font-size: 13px;
          }
        }
      }

      .login-form {
        //登录底部外壳
        .el-table__footer-wrapped {
          display: flex;
          flex-direction: column;

          .forget-password{
            display: flex;
            justify-content: flex-end;
            margin: 10px 0;

            .forget-password-button{
              font-size: 12px;
              color: #409eff;
              cursor: pointer;
            }
          }

          .footer-go-register{
            font-size: 12px;
            margin: 12px 0;
            display: flex;
            justify-content: center;

            .go-register {
              font-size: 12px;
              color: #409eff;
              //鼠标悬浮样式
              cursor: pointer;
            }
          }

        }

      }
      //登录底部按钮
      .footer-button{
        width: 100%;
        display: flex;
        justify-content: center;
      }



      //表单边距
      .el-form{
        margin-top: 30px;
      }
      //tabs 标签
      :deep(.el-tabs__item){
        color:#333;
        font-size: 18px;
      }
      //输入框高度
      :deep(.el-input__inner){
        height: 40px;
      }
      //输入框标签字体高度
      :deep(.el-form-item__label){
        height: 40px;
        line-height: 40px;
      }
</style>
